<template>
	<view class="user-view">
		<view class="user-header">
			<view class="user-header-left">
				<label class="user-name">{{userInfo.userName}}</label>
				<label class="user-company">{{userInfo.company}}<text v-if="userInfo.job"
						class="user-job">{{userInfo.job}}</text></label>
			</view>
			<image :src="userInfo.userHead||'../../static/images/icon_user_head@3x.png'" class="user-head"></image>
		</view>
		<view class="user-tab">
			<view class="user-demand" @click="onMyDemandClick">
				<image src="" class="user-tab-icon"></image>
				<view class="user-tab-right">
					<label class="user-tab-label">我的需求</label>
					<label class="user-tab-text">发布的兼职岗位</label>
				</view>
			</view>
			<view class="user-task" @click="onMyTaskClick">
				<image src="" class="user-tab-icon"></image>
				<view class="user-tab-right">
					<label class="user-tab-label">我的任务</label>
					<label class="user-tab-text">参加的兼职任务</label>
				</view>
			</view>
		</view>
		<view class="user-perfect" v-if="userInfo.perfect!=0">
			<image class="user-perfect-bg" mode="aspectFit" src="../../static/images/img_perfect_bg@3x.png"></image>
			<view class="user-perfect-main">
				<view class="user-perfect-left">
					<label class="user-perfect-label">{{perfectText}}名片</label>
					<label class="user-perfect-text">
						悄悄告诉你，{{perfectText}}名片提高<text>50%</text>录取率~
					</label>
				</view>
				<label type="default" class="user-perfect-btn" size="mini"
					@click="onPerfectClick">去{{perfectText}}</label>
			</view>
		</view>
		<view class="user-list">
			<view class="user-item" @click="onPushDemandClick">
				<image src="../../static/images/icon_user_xuqiu@3x.png" class="user-item-icon"></image>
				<view class="user-item-right">
					<label class="user-item-label">发布需求</label>
					<label class="user-item-arrow"></label>
				</view>
			</view>
			<view class="user-item" @click="onAuthClick">
				<image src="../../static/images/icon_user_shimin@3x.png" class="user-item-icon"></image>
				<view class="user-item-right">
					<label class="user-item-label">实名认证</label>
					<label class="user-item-text">已认证</label>
					<label class="user-item-arrow"></label>
				</view>
			</view>
			<view class="user-item" @click="onSettingClick">
				<image src="../../static/images/icon_user_yonghu@3x.png" class="user-item-icon"></image>
				<view class="user-item-right">
					<label class="user-item-label">用户设置</label>
					<label class="user-item-arrow"></label>
				</view>
			</view>
			<view class="user-item" @click="onHelpClick">
				<image src="../../static/images/icon_user_zhinan@3x.png" class="user-item-icon"></image>
				<view class="user-item-right">
					<label class="user-item-label">新手指南</label>
					<label class="user-item-arrow"></label>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {},
				perfectText: ""
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				//调接口获取用户信息
				this.userInfo = {
					userHead: "",
					userName: "张小泉",
					job: "销售经理",
					company: "成都市温江区什么什么有限公司",
					perfect: 2, //0 ok 1 需要完善 2 需要优化
					auth: true,
				}
				if (this.userInfo.perfect == 1) {
					this.perfectText = "完善"
				} else {
					this.perfectText = "优化"
				}
			},
			onPerfectClick(){
				uni.navigateTo({
					url: "../../pagesUser/user/perfectUserCard"
				})
			},
			onMyDemandClick() {
				uni.navigateTo({
					url: "../../pagesUser/user/demandIndex"
				})
			},
			onMyTaskClick(){
				uni.navigateTo({
					url: "../../pagesUser/user/taskIndex"
				})
			},
			onPushDemandClick() {
				uni.navigateTo({
					url: "../../pagesIndex/index/selectClass"
				})
			},
			onAuthClick() {
				if (this.userInfo.auth) {
					uni.navigateTo({
						url: "../../pagesUser/user/authIndex"
					})
				} else {
					uni.navigateTo({
						url: "../../pagesIndex/index/auth"
					})
				}
			},
			onSettingClick(){
				uni.navigateTo({
					url: "../../pagesUser/user/userSettings"
				})
			},
			onHelpClick(){
				uni.navigateTo({
					url: "../../pagesUser/user/help"
				})
			}
		}
	}
</script>

<style>
	.user-view {
		background: linear-gradient(180deg, #FFFFFF 0%, #F6F7FB 100%);
	}

	.user-header {
		padding: 32rpx;
		display: flex;
		align-items: center;
	}

	.user-header-left {
		flex: 1;
		display: flex;
		flex-flow: column;
	}

	.user-name {
		font-size: 38rpx;
		color: #181818;
		font-weight: 500;
	}

	.user-company {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #7B7B7B;
	}

	.user-job {
		margin-left: 15rpx;
		padding-left: 15rpx;
		border-left: 1px solid #D2D2D2;
	}

	.user-head {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}

	.user-tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 32rpx;
		margin-bottom: 32rpx;
	}

	.user-demand,
	.user-task {
		width: 320rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		padding: 32rpx;
		box-shadow: 0px 3rpx 8rpx rgba(0, 0, 0, 0.08);
	}

	.user-tab-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #007AFF;
		margin-right: 20rpx;
	}

	.user-tab-right {
		display: flex;
		flex-flow: column;
	}

	.user-tab-label {
		font-size: 30rpx;
		color: #181818;
		font-weight: 500;
	}

	.user-tab-text {
		font-size: 20rpx;
		color: #7B7B7B;
		margin-top: 6rpx;
	}

	.user-perfect {
		width: 686rpx;
		height: 108rpx;
		margin: 0 32rpx 32rpx 32rpx;
		position: relative;
	}

	.user-perfect-bg {
		width: 100%;
		height: 100%;
	}

	.user-perfect-main {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 35rpx;
	}

	.user-perfect-left {
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	.user-perfect-label {
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.user-perfect-text {
		font-size: 20rpx;
		color: #DDDDDD;
	}

	.user-perfect-text text {
		font-size: 20rpx;
		color: #FFC300;
	}

	.user-perfect-btn {
		width: 101rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		font-size: 20rpx;
		color: #1371FF;
		text-align: center;
	}

	.user-perfect-btn:active {
		opacity: 0.8;
	}

	.user-list {
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 8rpx rgba(0, 0, 0, 0.08);
		border-radius: 8rpx;
		margin: 0 32rpx;
	}

	.user-item {
		padding: 0 30rpx;
		height: 96rpx;
		display: flex;
		align-items: center;
	}

	.user-item:active {
		opacity: 0.8;
	}

	.user-item-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 19rpx;
	}

	.user-item-right {
		flex: 1;
		display: flex;
		align-items: center;
		height: 100%;
		border-bottom: 1px solid #E5E5E5;
	}

	.user-item:last-child .user-item-right {
		border: 0;
	}

	.user-item-label {
		font-size: 30rpx;
		color: #181818;
		flex: 1;
	}

	.user-item-text {
		font-size: 24rpx;
		color: #ACACAC;
	}

	.user-item-arrow {
		width: 32rpx;
		height: 32rpx;
		background: url(../../static/images/icon_jinru@3x.png) center no-repeat;
		background-size: 32rpx;
	}
</style>
